body {
	background-color: #f4f4f4;
}

header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 800;
	width: 100%;
	text-align: center;
	/* font-weight: bold; */
	padding: 3.5vw 0;
	background-color: #fff;
	color: #333;
	font-size: 5vw;
	font-size: 3.73vw;
	border-bottom: .1vw solid #ddd;
}

.shopping {
	position: relative;
	margin-top: 13.4vw;
	/* padding-bottom: 13vw; */
}

ul.shoppingList {
	display: flex;
	flex-wrap: wrap;
}

.shoppingList li {
	position: relative;
	width: 100vw;
	display: flex;
	align-items: center;
	padding: 3vw;
	background-color: #fff;
	margin-bottom: 2vw;
}

.shoppingList input {
	vertical-align: middle;
	height: 3vw;
	width: 4vw;
}

.shoppingList a {
	width: 100%;
	display: flex;
}

.shoppingList .image {
	width: 22%;
	margin: 0 3vw;
}

.shoppingList .image img {
	width: 100%;
	border-radius: 1vw;
}

.shoppingList .info {
	width: 60%;
}

.shoppingList .info .name {
	font-size: 3vw;
	font-weight: bold;
	line-height: 5vw;
	color: #555555;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.shoppingList .info .size {
	font-size: 3vw;
	line-height: 5vw;
	color: #999999;
	margin: 1.2vw 0 5vw;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.shoppingList .info .price {
	width: 54%;
	font-size: 3vw;
	font-weight: bold;
	line-height: 5vw;
	color: #555555;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.shoppingList .quantity {
	position: absolute;
	bottom: 0;
	right: 0;
	transform: translate(-10%, -50%);
	display: flex;
	width: 33vw;
	height: 7vw;
	justify-content: space-between;
	text-align: center;
	font-size: 3vw;
}

.shoppingList .quantity .reduce {
	width: 33.3%;
	border-radius: 1vw 0vw 0vw 1vw;
	border: .1vw solid #e3e3e3;
	box-sizing: border-box;
	line-height: 7vw;
}

.shoppingList .quantity .detail {
	width: 33.3%;
	height: 100%;
	box-sizing: border-box;
	text-align: center;
	line-height: 7vw;
	outline: 0;
	border: 0;
	color: #969696;
	font-size: 3vw;
	border: .1vw solid #e3e3e3;
	border-left: 0;
	border-right: 0;
	/* background-color: blue; */
}

.shoppingList .quantity .add {
	width: 33.3%;
	border-radius: 0vw 1vw 1vw 0vw;
	border: .1vw solid #e3e3e3;
	box-sizing: border-box;
	line-height: 7vw;
}

.shoppingList .close {
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(-100%, 50%);
}

.total {
	position: fixed;
	bottom: 13vw;
	left: 0;
	width: 100%;
	display: flex;
	background-color: #fff;
	border-top: .1vw solid #ddd;
	border-bottom: .1vw solid #ddd;
}

.total .detail {
	width: 70%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 2vw 0 3vw;
	box-sizing: border-box;
	font-size: 4vw;
}

.total .detail .checkbox input {
	/* vertical-align: middle; */
}

.total .detail .checkbox span {
	margin-left: 1vw;
	color: #999999;
}

.total .detail .price {
	color: #c55a5c;
}

.total button {
	width: 30%;
	outline: 0;
	border: 0;
	height: 13vw;
	color: #fff;
	font-size: 4vw;
	background-color: #c55a5c;
}

.shoppingList .close img {
	width: 3.2vw;
}

input[type="checkbox"] {
	width: 3.5vw;
	height: 3.5vw;
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	line-height: 3.5vw;
	position: relative;
	top: -.5vw;
}

input[type="checkbox"]::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	background: #fff;
	width: 100%;
	height: 100%;
	border: .1vw solid #d9d9d9;
}

input[type="checkbox"]:checked::before {
	content: "\2714";
	background-color: #fff;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	border: .1vw solid #e50232;
	color: #e50232;
	font-size: 3.5vw;
	/* font-weight: bold; */
}

.Recommend {
	background-color: #fff;
}

.Recommend .title {
	font-size: 4vw;
	font-weight: bold;
	line-height: 3vw;
	color: #333333;
	text-align: center;
	padding: 4vw 0;
}

.RecommendList {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	margin-bottom: 10vw;
}

.RecommendList li {
	width: 48%;
}

.RecommendList li img {
	width: 100%;
}

.RecommendList li .info {
	padding: 2vw;

}

.RecommendList li .info .name {
	font-size: 3vw;
	font-weight: bold;
	line-height: 3vw;
	color: #333333;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.RecommendList li .info .price {
	margin: 3vw 0;
	font-size: 3vw;
	font-weight: bold;
	line-height: 3vw;
	color: #c55a5c;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.tabbar {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 800;
	background-color: #fbfbfb;
	border-top: .1vw solid #ddd;
}

.tabbar ul {
	width: 100vw;
	display: flex;
	align-items: center;
}

.tabbar ul li {
	width: 20%;
	padding: 2.6vw 0 1.4vw;
	text-align: center;
}

.tabbar img {
	width: 4.3vw;
	margin-bottom: 1vw;
}

.tabbar .title {
	font-size: 2vw;
	font-weight: bold;
	line-height: 3vw;
	color: #555555;
}

.tabbar ul li:nth-child(4) .title {
	color: #c55a5c;
}
